<template>
  <div>
    <MyBack/>
    <div>
      <div class="nav" @click="toMyVar()">
        <div class="name" >
          {{name}}
        </div>
        <div class="autograph">
          {{autograph}}
        </div>
      </div>
    </div>
    <div class="value">
      <div class="newDay">
        当天学习时长: {{newDay}}
      </div>
      <div class="newWeek">
        本周学习时长: {{newWeek()}}
      </div>
    </div>
    <div class="my">
      <textarea placeholder="每日一感想" v-model="value"></textarea>
    </div>
    <div class="end">
      人生中有很多事情你不竭尽全力去做，你永远不知道自己有多优秀
    </div>
    <div class="img">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F21%2F20%2FDzTrFmSi9z.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659264808&t=88d1173a8ed89bafb016fdeafa770c86" alt="笑脸">
    </div>
  </div>
</template>

<script>
import MyBack from '@/components/MyBack.vue'

export default {
  components: {
    MyBack
  },
  props: {},
  data () {
    return {
      name: '你好',
      autograph: localStorage.getItem("autograph"),
      newDay: localStorage.getItem("newDay"),
      value: '每日的感想'
    }
  },
  watch: {
    value(){
      localStorage.setItem("value", this.value)
    }
  },
  methods: {
    newWeek(){
      let week = ['One ', 'Two ', 'Three ', 'four ', 'fife ', 'six ', 'seven ']
      let num = 0
      for(let i of week){
        num += Number(localStorage.getItem(i))
      }
      return num
    },
    toMyVar(){
      this.$router.push({
        path: '/myvar'
      })
    }
  },
  mounted () {
    let name = localStorage.getItem('name')
    let autograph = localStorage.getItem('autograph')
    let value = localStorage.getItem('value')
    if(name){
      this.name = name
    }else{
      localStorage.setItem('name', this.name)
    }
    if(autograph){
      this.autograph = autograph
    }else{
      localStorage.setItem('autograph', this.autograph)
    }
    if(value){
      this.value = value
    }
    this.$store.state.index = 1
  }
}
</script>
<style scoped>
.newDay{
  width: 30vw;
  border: 1px solid;
  background-color: aliceblue;
  color: rgb(63, 189, 37);
  margin-right: 50px;
  margin-left: 30px;
  float: left;
  margin-bottom: 30px;
}
.name{
  text-align: center;
  font-family: "楷体";
  overflow-y: scroll;
  font-weight: 600;
  color: rgb(111, 111, 111)
}
.newWeek{
width: 30vw;
  float: left;
  background-color:aliceblue;
  border: 1px solid;
  color: rgb(158, 171, 16);
  margin-bottom: 30px;
}
.value{
  margin-top: 20px;
}
.my{
  clear: both;
  background-color: azure;
  text-align: center;
}
textarea{
  background-color: azure;
  border: 0px solid;
  color: yellowgreen;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 40vh;
}
.autograph{
  margin-top: 10px;
  text-align: center;
  height: 3vh;
  overflow-y: scroll;
  font-size: 2vh;
}
.end{
  padding: 19.8px;
  line-height: 4vh;
  font-size: 2.5vh;
  color: red;
}
.img img{
  height: 8vh;
}
.img{
  text-align: center;
}
</style>


